<template>
	<view class="myservice" @click.stop="()=>{}">
		<view class="myservice-connet">
			<view class="myservice-connet-part">
				<view class="myservice-connet-part-title">
					<text>选择联系客服</text>
				</view>
				<!-- <view class="myservice-connet-part-list"> -->
					<button open-type="contact" class="myservice-connet-part-list">
					<view class="myservice-connet-part-list-left">
						<image src="../../pagesA/static/myservice/service-Popup-icon1.png" mode="widthFix" style="width: 60%; height: 60%;"></image>
					</view>
					<view class="myservice-connet-part-list-middle">
						<view class="myservice-connet-part-list-middle-top">
							<text>在线客服</text>
						</view>
						<view class="myservice-connet-part-list-middle-bottom">
							<text>在线对话快速受理</text>
						</view>
					</view>
					<view class="myservice-connet-part-list-right">
						<text>></text>
					</view>
					</button>
			<!-- 	</view> -->
				<view class="myservice-connet-part-list" style="border: #0e9dd9 solid 4rpx;" @click="phone()">
					<view class="myservice-connet-part-list-left">
						<image src="../../pagesA/static/myservice/service-Popup-icon3.png" mode="widthFix" style="width: 60%; height: 60%;"></image>
					</view>
					<view class="myservice-connet-part-list-middle" >
						
						<view class="myservice-connet-part-list-middle-top">
							<text>平台呼叫</text>
						</view>
						<view class="myservice-connet-part-list-middle-bottom">
							<text>呼叫平台</text>
						</view>
					</view>
					<view class="myservice-connet-part-list-right" style="color: #0e9dd9;">
						<text>></text>
					</view>
				</view>
			</view>
			<view class="myservice-connet-part-icon" @click="closeservice()">
				<image src="../../pagesA/static/suggest/close.png" mode="widthFix" style="width: 64rpx; height: 64rpx;"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				service:Boolean
			}
		},
		props:{
			showservice:Boolean
		},
		watch:{
			showservice(e){
				this.service = e
			}
		},
		methods: {
			phone(){
				uni.makePhoneCall({
					phoneNumber: '18144442730' //改为客服号码
				});
			},
			closeservice(){
				this.$emit('showserviceview', false);
			}
		}
	}
</script>

<style>
	page{
		width: 100%;
		height: 100%;
		
	}
	button{
		margin: 0;
		padding: 0;
		border: 0;
		background-color: transparent !important;
	}
	button::after{
	  border: none;
	}
	.myservice{
		width: 100%;
		height: 100%;
		background-color: rgba(62,62,62, 0.3);
		position: fixed;
		z-index: 999;
		display: flex;
		justify-content: center;
		align-items: center;
		touch-action: none;
	}
	.myservice-connet{
		width: 100%;
		height: 550rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		align-content: space-between;
		flex-wrap: wrap;
		
	}
	.myservice-connet-part{
		width: 88%;
		height: calc(100% - 100rpx);
		background-color: white;
		display: flex;
		align-content: space-around;
		flex-wrap: wrap;
		justify-content: center;
		border-radius: 24rpx;
		padding-bottom: 40rpx;
	}
	.myservice-connet-part-title{
		width: 100%;
		height: 14%;
		font-size: 48rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.myservice-connet-part-list{
		width: 80%;
		height: 24%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border: #4fe8ca solid 4rpx;
		border-radius: 32rpx;
	}
	.myservice-connet-part-list-left{
		width: 20%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.myservice-connet-part-list-middle{
		width: 60%;
		height: 100%;
	}
	.myservice-connet-part-list-middle-top{
		width: 100%;
		height: 50%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		font-size: 32rpx;
	}
	.myservice-connet-part-list-middle-bottom{
		width: 100%;
		height: 50%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		font-size: 32rpx;
		color: #7f7f7f;
	}
	.myservice-connet-part-list-right{
		width: 20%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 48rpx;
		color: #4fe8ca;
	}
/* 	.myservice-connet-part-bottom{
		width: 100%;
		height: 24%;
		background-color: brown;
	} */
	.myservice-connet-part-icon{
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
